<!-- 头部 -->
<template>
  <div class="swiperBox">
    <!-- 头部 -->
    <div class="header">
      <div class="headerBox">
        <div @click="add('')"><img src="@/assets/images/1481892407.png" width="100"></div>
        <div>
          <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="" text-color="#fff" active-text-color="#00dfb9">
            <template v-for="item in navMenuList">
              <div :key="item.id" v-if="item.status!='0'" style="display:inline-block">
                <el-submenu :index="item.name" :key="item.id" v-if="item.subCategoryBOList && item.subCategoryBOList.length">
                  <template slot="title">{{item.name}}</template>
                  <el-menu-item v-for="i in item.subCategoryBOList" :key="i.id" :index="i.name" @click="add(i.id)">{{i.name}}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="item.name" @click="add(item.id)" :key="item.id">{{item.name}}</el-menu-item>
              </div>
            </template>
          </el-menu>
        </div>
        <div>
          <span v-if="!userInfo.token" @click="$router.push('/login')">
            <img src="@/assets/images/user.png" width="22" height="22" alt="" style="vertical-align: middle;margin-right: 3px;">
            <span>{{$t('lan.login')}}</span>
          </span>
          <span v-else>
            <el-popover placement="bottom" width="380" trigger="click">
              <div v-if="$route.path!='/shoppingCart'">
                <div class="flexBox" v-for="i in cartList" :key="i.id">
                  <div class="flexLeft">
                    <img v-if="i.picUrl" :src="i.picUrl" width="80" height="80" alt="">
                    <img v-else src="@/assets/images/1481161992.jpg" width="80" height="80" alt="">
                  </div>
                  <div class="flexRight">
                    <p style="font-size:18px;color:#2c2c2c">{{i.categoryName}}</p>
                    <p><span>{{$t('lan.doorColor')}}：{{i.colorValue?i.colorValue:''}}<span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span></span> <span>{{$t('lan.cabinetColor')}}：{{i.cabinetColorValue?i.cabinetColorValue:''}}<span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span></span></p>
                    <p><span>{{$t('lan.auxiliaryNum')}}：<span style="color:#2c2c2c">{{i.subCategoryTotalCount}}</span></span> </p>
                    <p><span>{{$t('lan.totalNumDoors')}}：<span style="color:#2c2c2c">{{i.doorTotalCount}}</span></span></p>
                    <p><span>{{$t('lan.system')}}：</span> <span style="color:#2c2c2c">{{i.operationCode}} {{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</span></p>
                  </div>
                </div>
                <el-button class="invoicing" type="primary" v-if="cartList.length" @click="$router.push('/shoppingCart')">{{$t('lan.check')}}</el-button>
              </div>
              <div class="navMenu">
                <p @click="$router.push('/shoppingCart')" v-if="$route.path!=='/shoppingCart'">{{$t('lan.cart')}}</p>
                <p @click="toPath('/orderList')" v-if="$route.path!=='/orderList'">{{$t('lan.order')}}</p>
                <!-- <p>修改密码</p> -->
                <p @click="logout">{{$t('lan.logout')}}</p>
              </div>
              <p slot="reference" style="position: relative;display: inline-block;">
                <img src="@/assets/images/portrait.png" width="30" height="30" style="vertical-align:middle;" alt="">
                <span class="tag" v-if="this.cartLength>0 && $route.path!='/shoppingCart'">{{cartLength}}</span>
              </p>
            </el-popover>
            <span>{{userInfo.mobile}}</span>
          </span>
        </div>
      </div>
    </div>
    <div style="margin-top:80px;"></div>
  </div>
</template>
<script>
import { colorList } from '../../common'
export default {
  data () {
    return {
      activeIndex2: '',
      userInfo: {},
      navMenuList: [],
      cartLength: null,
      cartList: [],
    }
  },
  methods: {
    toPath (path) {
      this.$router.push(path)
    },
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    add (id) {
      const typeId = id ? id : this.navMenuList[0].id
      this.$router.push(`/?id=${typeId}`)
      if (!id) return
      window.location.reload()
    },
    logout () {
      this.$confirm(this.$t('lan.logoutPrompt'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        localStorage.clear()
        this.$router.push('/login')
        window.location.reload()
      });
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
      this.navMenuList = JSON.parse(localStorage.getItem('navMenuList')) || ''
      this.cartLength = JSON.parse(localStorage.getItem('cartList')) ? JSON.parse(localStorage.getItem('cartList')).length : ''
      this.cartList = JSON.parse(localStorage.getItem('cartList')) ? JSON.parse(localStorage.getItem('cartList')).slice(0, 2) : []
    })
  }
}
</script>
<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 1);
  height: 80px;
  z-index: 9;
}
.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.headerBox div:nth-of-type(1) {
  flex: 0 0 100px;
  color: #fff;
  text-align: center;
}
.headerBox div:nth-of-type(1) img {
  position: relative;
  top: 0px;
  cursor: pointer;
}
.headerBox div:nth-of-type(2) {
  flex: 1;
  color: #fff;
  text-align: center;
}
.headerBox div:nth-of-type(3) {
  flex: 0 0 230px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}
.headerBox div:nth-of-type(3) span {
  font-size: 16px;
  margin-right: 10px;
}
.flexBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.flexLeft {
  flex: 0 0 80px;
  padding-right: 20px;
}
.flexRight {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.flexRight p {
  line-height: 24px;
  font-size: 14px;
  color: #7b7b7b;
}
.tag {
  position: absolute;
  right: -10px;
  top: -6px;
  font-size: 12px !important;
  margin-right: 0px !important;
  background: #f53434;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  line-height: 20px;
}
.navMenu {
  padding: 20px 0px;
}
.navMenu p {
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  margin-left: 15px;
  color: #409eff;
  cursor: pointer;
}
.invoicing {
  width: 60%;
  margin-top: 20px;
  margin-left: 20%;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.swiperBox >>> .el-menu {
  background: transparent;
}
.swiperBox >>> .el-menu-item {
  min-width: 120px;
  font-size: 14px;
}
.swiperBox >>> .el-menu-item:hover {
  background: transparent;
  color: #ee781e !important;
}
.swiperBox >>> .el-submenu__icon-arrow {
  display: none;
}
.swiperBox >>> .el-menu--horizontal > .el-menu-item.is-active {
  color: #00dfb9 !important;
  border-bottom-color: transparent !important;
}
.swiperBox >>> .el-menu--horizontal > .el-menu-item,
.swiperBox >>> .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 90px;
  line-height: 90px;
}
.swiperBox >>> .el-menu--horizontal > .el-submenu .el-submenu__title {
  font-size: 26px;
}
.swiperBox >>> .el-menu--horizontal .el-menu .el-menu-item {
  color: #555;
}
.swiperBox >>> .el-submenu.is-active .el-submenu__title {
  border-bottom-color: transparent !important;
}
.swiperBox >>> .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #00dfb9 !important;
}

.swiperBox >>> .el-carousel__indicator.is-active button {
  background: #00dfb9;
}
.swiperBox >>> .el-carousel__arrow {
  background: #00dfb9;
  width: 45px;
  height: 45px;
}
.swiperBox >>> .el-carousel__arrow i {
  font-size: 24px;
}
</style>